<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>登录</title>
    <link rel="stylesheet" href="/static/layui/css/layui.css"/>
    <script src="/static/fsLayui/plugins/jquery/jquery.min.js"></script>
</head>
<body style="height: 300px;">
<fieldset class="layui-elem-field layui-field-title" style="margin-top: 20px;">
    <legend>用户登录</legend>
</fieldset>
<form class="layui-form" action="/user/login" method="post" style="text-align: center;">
    <div class="layui-form-item" style="margin-bottom: 5px;">
        <label class="layui-form-label">用&nbsp;&nbsp;户&nbsp;&nbsp;名</label>
        <div class="layui-input-inline">
            <input type="text" name="userName" required="true" placeholder="请输入用户名" lay-verify="userName" autocomplete="off" class="layui-input" style="width: 280px;"/>
        </div>
    </div>
    <div class="layui-form-item" style="margin-bottom: 5px;">
        <label class="layui-form-label">密&nbsp;&nbsp;码</label>
        <div class="layui-input-inline">
            <input type="password" name="password" required="true" placeholder="请输入密码" lay-verify="password"
                   autocomplete="off" class="layui-input" style="width: 280px;"/>
        </div>
    </div>
    <div class="layui-form-item" style="margin-bottom: 5px;text-align: left;">
        <div class="layui-input-block">
            <input type="checkbox" id="rememberMe" name=""rememberMe lay-skin="primary" title="记住密码">
        </div>
    </div>
    <div class="layui-form-item" style="margin-top: 15px;text-align: center;">
        <button class="layui-btn layui-btn-normal layui-btn-radius" lay-submit="" lay-filter="checkForm"
                style="width: 300px;">登录</button>
    </div>
    <a href="javascript:findPassword()">忘记密码</a>
</form>
<script src="/static/js/jquery.cookie.js"></script>
<script src="/static/layui/layui.js"></script>
<script src="/static/layui/layui.all.js"></script>
<script>
    layui.form.verify({
        userName:[
            /^[\S]{5,15}$/,"用户名必须5到15位，且不能出现空格"
        ],
        password:[
            /^[\S]{6,15}$/,"密码必须6到15位，且不能出现空格"
        ]
    });
    layui.use('form',function(){
        var form=layui.form;
        //监听提交
        form.on('submit(checkForm)',function (data) {
            var url = "/user/login";
            var data = $("form").serializeArray();
            $.ajax({
                type:"POST",
                url: url,
                data: data,
                success: function (res) {
                    if(res.success){
                        if(rememberMe == 'on'){     //记住密码
                            $.cookie('user',$("#userName").val().trim()+'-'+$("#password").val().trim(),{expires: 7 }); //7天有效期
                        }else{
                            $.cookie('user',null);
                        }
                        layer.msg('登录成功！',{
                            icon: 1,
                            time: 1000
                        },function () {
                            //先得到当前iframe层的索引
                            var index = parent.layer.getFrameIndex(window.name);
                            parent.location.reload();
                            //再执行关闭
                            parent.layer.close(index);
                        });
                    }else{
                        layer.msg(res.errorInfo);
                    }
                },
                error: function (data) {
                    layer.msg("网络错误！");
                }
            });
            return false;
        });
    });

    /**
     * 找回密码
     */
    function findPassword(){
        var index = parent.layer.getFrameIndex(window.name);            //得到当前iframe的索引
        parent.layer.close(index);                                      //关闭当前弹出的iframe
        parent.layer.open({
            type: 2,
            title: false,
            area : [ '450px', '370px' ], //宽高
            closeBtn : 0, //不显示关闭按钮
            scrollbar: false, //禁止浏览器出现滚动条
            resize: false, //禁止拉伸
            move : false, //禁止拖拽
            shade : 0.8, //遮罩

            shadeClose : true, //开启遮罩关闭
            content : '/user/findPassword.html', //这里content是一个Url
        });
    }

    $(function () {
        //从cookie中获取记住的用户名密码
        var user = $.cookie('user');
        if(typeof(user)!='undefined'&&user!='null'){
            var userNameAndPassword = user.split("-");
            $("#userName").val(userNameAndPassword[0]);
            $("#password").val(userNameAndPassword[1]);
            $("#rememberMe").attr({"checked":"checked"});
            $("#rememberMe").next().addClass("layui-form-checked");
        }
    })

</script>

</body>
</html>
